/* 公共样式 */
html,body,.main{
  width: 100%;
  height: 100%;
  min-width: 1024px;
  min-height: 778px;
}

.main,.content{
  overflow: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.main{
  background-image: url(./../img/main_bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;
}

.main .content{
  width: 100%;
  height: 100%;
  padding-left: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main .content .content-left{
  width: 15%;
}

.main .content .content-left .logo{
  width: 100%;
  padding-left: 10px;
  padding-bottom: 10px;
}

.main .content .content-left .logo img{
  width: 70%;
  min-width: 120px;
}

.main .content .content-left .pagination{
  width: 100%;
  height: 80%;
  margin-top:10%;
  overflow: hidden;
}

.main .content .content-left .pagination .pagination-item{
  width: 100%;
  height: 20%;
  position: relative;
  cursor: pointer;
}

.main .content .content-left .pagination .pagination-item a{
  position: absolute;
  right: -55%;
  width: 100%;
  height: 100%; 
}

.main .content .content-left .pagination .pagination-item .pagination-item-bottle{
  width: 100%;
  height: 100%;
  position: absolute;
}

.main .content .content-left .pagination .pagination-item .pagination-item-bottle img{
  width: 110%;
}

.main .content .content-left .pagination .pagination-item .pagination-item-text{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 13%;
  left: 34%;
}

.main .content .content-left .pagination .pagination-item .pagination-item-text img{
  width: 28%;
  display: none;
}

.main .content .content-right{
  width: 85%;
  position: relative;
}

.main .content .content-right .content-right-bottom{
  width: 100%;
  height: 10%;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
}

.main .content .content-right .content-right-bottom .nav{
  width: 760px;
  height: 100%;
  position: relative;
  left: 120px;
}

.main .content .content-right .content-right-bottom .nav li{
  width: 252px;
  height: 62px;
  background-size: 252px 62px;
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
  float: left;
  position: relative;
}

.main .content .content-right .content-right-bottom .nav li a{
  display: block;
  width: 228px;
  height: 62px;
}

.main .content .content-right .content-right-bottom .nav li.nav-about{
  background-image: url(./../img/about.png);
  z-index: 3
}
.main .content .content-right .content-right-bottom .nav li.nav-call{
  left: -72px;
  background-image: url(./../img/call.png);
  z-index: 2
}
.main .content .content-right .content-right-bottom .nav li.nav-buy{
  background-image: url(./../img/buy.png);
  z-index: 1;
  left: -144px;
}

.main .content .content-right .content-right-bottom .nav li:nth-child(1).active{
  width: 252px;
  height: 74px;
  background-size: 246px 74px;
  background-image: url(./../img/about_active.png);
  z-index: 4
}

.main .content .content-right .content-right-bottom .nav li:nth-child(2).active{
  width: 252px;
  height: 74px;
  background-size: 246px 74px;
  background-image: url(./../img/call_active.png);
  z-index: 4
}

.main .content .content-right .content-right-bottom .nav li:nth-child(3).active{
  width: 252px;
  height: 74px;
  background-size: 246px 74px;
  background-image: url(./../img/buy_active.png);
  z-index: 4
}
@media screen and (max-width: 3000px) {
  .main .content .content-left,
  .main .content .content-right
  {
    height: 850px;
    margin-top: 30px;
  }
  .main .content .content-right .content-right-bottom .nav li{
    position: relative;
    width: 227px;
    height: 54px;
    background-size: 216px 54px;
  }
  .main .content .content-right .content-right-bottom .nav li a{
    display: block;
    width: 200px;
    height: 54px;
  }
  .main .content .content-right .content-right-bottom .nav li:nth-child(1).active{
    width: 223px;
    height: 62px;
    background-size: 223px 62px;
  }
  
  .main .content .content-right .content-right-bottom .nav li:nth-child(2).active{
    width: 223px;
    height: 62px;
    left: -60px;
    background-size: 223px 62px;
  }
  
  .main .content .content-right .content-right-bottom .nav li:nth-child(3).active{
    width: 222px;
    height: 62px;
    left: -100px;
    background-size: 222px 62px;
  }
}
@media screen and (max-width: 1780px) {
  .main .content .content-left,
  .main .content .content-right
  {
    /* height: 780px; */
  }
}
@media screen and (max-width: 1680px) {
  .main .content .content-left,
  .main .content .content-right
  {
    height: 770px;
  }
  .main .content .content-right .content-right-bottom .nav li{
    position: relative;
    width: 227px;
    height: 54px;
    background-size: 216px 54px;
  }
  .main .content .content-right .content-right-bottom .nav li a{
    display: block;
    width: 200px;
    height: 54px;
  }
  .main .content .content-right .content-right-bottom .nav li:nth-child(1).active{
    width: 223px;
    height: 62px;
    background-size: 223px 62px;
  }
  
  .main .content .content-right .content-right-bottom .nav li:nth-child(2).active{
    width: 223px;
    height: 62px;
    left: -60px;
    background-size: 223px 62px;
  }
  
  .main .content .content-right .content-right-bottom .nav li:nth-child(3).active{
    width: 222px;
    height: 62px;
    left: -100px;
    background-size: 222px 62px;
  }
}
@media screen and (max-width: 1600px) {
  .main .content .content-left,
  .main .content .content-right
  {
    height: 690px;
  }
  .main .content .content-right .content-right-bottom .nav li{
    width: 227px;
    height: 54px;
    background-size: 216px 54px;
  }
  
  .main .content .content-right .content-right-bottom .nav li a{
    display: block;
    width: 200px;
    height: 54px;
  }
  .main .content .content-right .content-right-bottom .nav li.nav-call{
    left: -70px;
  }
  .main .content .content-right .content-right-bottom .nav li.nav-buy{
    left: -140px;
  }
  .main .content .content-right .content-right-bottom .nav li:nth-child(1).active{
    width: 223px;
    height: 62px;
    background-size: 223px 62px;
  }
  .main .content .content-right .content-right-bottom .nav li:nth-child(2).active{
    width: 223px;
    height: 62px;
    left: -60px;
    background-size: 223px 62px;
  }
  .main .content .content-right .content-right-bottom .nav li:nth-child(3).active{
    width: 222px;
    height: 62px;
    left: -100px;
    background-size: 222px 62px;
  }
}
@media screen and (max-width: 1500px) {
  .main .content .content-left,
  .main .content .content-right
  {
    height: 630px;
  }
}
@media screen and (max-width: 1400px) {
  .main .content .content-left,
  .main .content .content-right
  {
    height: 600px;
  }
}
@media screen and (max-width: 1300px) {
  .main .content .content-left,
  .main .content .content-right
  {
    height: 550px;
  }
}
@media screen and (max-width: 1200px) {
  .main .content .content-left,
  .main .content .content-right
  {
    height: 500px;
  }
}
@media screen and (max-width: 1100px) {
  .main .content .content-left,
  .main .content .content-right
  {
    height: 450px;
  }
}